<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象结构</title>
</head>

<body>
    <script>
        // 对象解构变量名需要和属性名一样
        const { username, password } = { username: '张三', password: '123456' }
        console.log(username, password); // 张三 123456

        // 对象解构的变量名可以重新命名 格式：旧变量名：新变量名
        const { stuId: studentId } = { stuId: 1 }
        console.log(studentId);

        // 解构数组对象
        const pig = [
            {
                name: '佩奇',
                age: 2
            }
        ]
        const [{ name, age }] = pig
        console.log(name, age); // 佩奇 2

        // 多级对象解构
        const peiqi = {
            pigName: '佩奇',
            family: {
                father: '猪爸爸',
                mother: '猪妈妈',
                borther: '乔治'
            },
            pigAge: 6
        }
        const { pigName, family: { father, mother, borther }, pigAge } = peiqi
        console.log(pigName, father, mother, borther, pigAge); // 佩奇 猪爸爸 猪妈妈 乔治 6
    </script>
</body>

</html>